<template>
	<div class="count-effect">
		<div class="card">
			<div class="card__header">
				<span class="label">昨日概况</span>
			</div>
			<el-row :gutter="15" :justify="'center'">
				<el-col :lg="16" :md="20" :xs="24">
					<div class="card__container">
						<ul class="count-effect__cop">
							<li>
								<span>活跃用户</span>
								<span>{{ count.active_users }}</span>
								<span>
									<span>日</span>
									<span
										:class="
											count.active_users_yesterday == 0
												? ''
												: count.active_users_yesterday > 0
													? 'add'
													: 'minus'
										"
										>{{ count.active_users_yesterday > 0 ? '+' : ''
										}}{{ count.active_users_yesterday }}%</span
									></span
								>
								<span
									><span>周</span>
									<span
										:class="
											count.active_users_week == 0
												? ''
												: count.active_users_week > 0
													? 'add'
													: 'minus'
										"
										>{{ count.active_users_week > 0 ? '+' : ''
										}}{{ count.active_users_week }}%</span
									></span
								>
								<span
									><span>月</span
									><span
										:class="
											count.active_users_month == 0
												? ''
												: count.active_users_month > 0
													? 'add'
													: 'minus'
										"
										>{{ count.active_users_month > 0 ? '+' : ''
										}}{{ count.active_users_month }}%</span
									></span
								>
							</li>

							<li>
								<span>注册用户</span>
								<span>{{ count.registered_users }}</span>
								<span>
									<span>日</span>
									<span
										:class="
											count.registered_users_yesterday == 0
												? ''
												: count.registered_users_yesterday > 0
													? 'add'
													: 'minus'
										"
										>{{ count.registered_users_yesterday > 0 ? '+' : ''
										}}{{ count.registered_users_yesterday }}%</span
									></span
								>
								<span
									><span>周</span>
									<span
										:class="
											count.registered_users_week == 0
												? ''
												: count.registered_users_week > 0
													? 'add'
													: 'minus'
										"
										>{{ count.registered_users_week > 0 ? '+' : ''
										}}{{ count.registered_users_week }}%</span
									></span
								>
								<span
									><span>月</span
									><span
										:class="
											count.registered_users_month == 0
												? ''
												: count.registered_users_month > 0
													? 'add'
													: 'minus'
										"
										>{{ count.registered_users_month > 0 ? '+' : ''
										}}{{ count.registered_users_month }}%</span
									></span
								>
							</li>

							<li>
								<span>总收入</span>
								<span>{{ count.income }}</span>
								<span>
									<span>日</span>
									<span
										:class="
											count.income_yesterday == 0
												? ''
												: count.income_yesterday > 0
													? 'add'
													: 'minus'
										"
										>{{ count.income_yesterday > 0 ? '+' : ''
										}}{{ count.income_yesterday }}%</span
									></span
								>
								<span
									><span>周</span>
									<span
										:class="
											count.income_week == 0
												? ''
												: count.income_week > 0
													? 'add'
													: 'minus'
										"
										>{{ count.income_week > 0 ? '+' : ''
										}}{{ count.income_week }}%</span
									></span
								>
								<span
									><span>月</span
									><span
										:class="
											count.income_month == 0
												? ''
												: count.income_month > 0
													? 'add'
													: 'minus'
										"
										>{{ count.income_month > 0 ? '+' : ''
										}}{{ count.income_month }}%</span
									></span
								>
							</li>

							<li>
								<span>人均停留时长</span>
								<span>{{ count.remain }}</span>
								<span>
									<span>日</span>
									<span
										:class="
											count.remain_yesterday == 0
												? ''
												: count.remain_yesterday > 0
													? 'add'
													: 'minus'
										"
										>{{ count.remain_yesterday > 0 ? '+' : ''
										}}{{ count.remain_yesterday }}%</span
									></span
								>
								<span
									><span>周</span>
									<span
										:class="
											count.remain_week == 0
												? ''
												: count.remain_week > 0
													? 'add'
													: 'minus'
										"
										>{{ count.remain_week > 0 ? '+' : ''
										}}{{ count.remain_week }}%</span
									></span
								>
								<span
									><span>月</span
									><span
										:class="
											count.remain_month == 0
												? ''
												: count.remain_month > 0
													? 'add'
													: 'minus'
										"
										>{{ count.remain_month > 0 ? '+' : ''
										}}{{ count.remain_month }}%</span
									></span
								>
							</li>
						</ul>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useCool } from '/@/cool';

const { service, router } = useCool();

const count = ref({
	active_users: 0,
	active_users_yesterday: 0,
	active_users_week: 0,
	active_users_month: 0,
	registered_users: 0,
	registered_users_yesterday: 0,
	registered_users_week: 0,
	registered_users_month: 0,
	income: 0,
	income_yesterday: 0,
	income_week: 0,
	income_month: 0,
	remain: 0,
	remain_yesterday: 0,
	remain_week: 0,
	remain_month: 0
});

onMounted(() => {
	service.user.analysis.getYesterdayOverview({}).then(res => {
		console.log(res);
		count.value = res;
	});
	// service.user.analysis.getYesterdayOverview().then(res => {
	// 	console.log(res);
	// 	count.value = res;
	// });
});
</script>

<style lang="scss" scoped>
.count-effect {
	&__cop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// height: 50px;

		li {
			display: flex;
			flex-direction: column;
			justify-content: center;
			list-style: none;
			flex: 1;
			align-items: center;
			span {
				&:first-child {
					font-size: 14px;
					color: #999;
					margin-bottom: 10px;
				}
				&:nth-child(2) {
					margin-top: 5px;
					font-size: 24px;
					color: #000;
				}
				margin-top: 10px;
				span {
					color: #999;
					&:first-child {
						font-size: 13px;
						color: #999;
						margin-right: 10px;
					}
					&:last-child {
						font-size: 13px;
					}
					&.add {
						color: var(--color-primary) !important;
					}
					&.minus {
						color: var(--el-color-danger) !important;
					}
				}
			}
		}
	}
}
</style>
